<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>Daniel While Board</title>
		<meta name="description" content="daniel white board" />
		<meta name="author" content="Daniel" />
		<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<div>
			<div class="author">DWB developed by Daniel.Xiao</div>
			
			<div class="textchat-container">
				<div class="chatDisplay">
					<textarea id="messageDisplayArea"></textarea>
				</div>
				<div class="txtInput">
					<input type="text" placeholder="enter some messages" id="txtMsgInput"/>
				</div>
			</div>
			
			<div id="div4firefoxPaste" contenteditable="true"></div>
			
			<div class="stage-container"></div>
			
			<div class="toolset-container">
				<ul>
					<li>
						<div class="menu" id="shapeMenu" >
							<span class="icon-base pencil-icon"></span>
						</div>
						<div class="menu-items" id="shapeSubMenu">
							<ul>
								<li>
									<span id="drawBrushTool">
										<span class="icon-base pencil-icon"></span>
									</span>
								</li>
								<li>
									<span id="drawLineTool">
										<span class="icon-base line-icon"></span>
									</span>
								</li>
								<li>
									<span id="drawCircleTool">
										<span class="icon-base circle-icon"></span>
									</span>
								</li>
								<li>
									<span id="drawEllipseTool">
										<span class="icon-base ellipse-icon"></span>
									</span>
								</li>
								<li>
									<span id="drawRectTool">
										<span class="icon-base rect-icon"></span>
									</span>
								</li>
								<li>
									<span id="drawSquareTool">
										<span class="icon-base square-icon"></span>
									</span>
								</li>
								<li>
									<span id="drawTextTool">
										<span class="icon-base text-icon"></span>
									</span>
								</li>
							</ul>	
						</div>
					</li>	
					<li>
						<div class="menu" id="displayImgMenu">
							<span class="icon-base image-icon"></span>
						</div>
						<div class="menu-items" id="displayImgSubPanel">
							<div>
								<span>Url:</span>
								<input type="text" />
								<input type="button" value="OK" id="displayImgTool" style="display: none" />
							</div>
						</div>						
					</li>					
					<li>
						<div class="menu" id="fillColorMenu" style="background-color: yellow">
							<span class="icon-base fill-color-icon"></span>
						</div>
						<div class="menu-items">
							<ul>
								<li>
									<span color="yellow" id="fillYellowMenu"></span>
								</li>
								<li>
									<span color="blue" id="fillBlueMenu"></span>
								</li>
								<li>
									<span color="orange" id="fillOrangeMenu"></span>
								</li>
								<li>
									<span color="green" id="fillGreenMenu"></span>
								</li>
							</ul>	
						</div>
					</li>
					<li>
						<div class="menu" id="strokeColorMenu" style="background-color: orange">
							<span class="icon-base stroke-color-icon"></span>
						</div>
						<div class="menu-items">
							<ul>
								<li>
									<span color="yellow" id="strokeYellowMenu"></span>
								</li>
								<li>
									<span color="blue" id="strokeBlueMenu"></span>
								</li>
								<li>
									<span color="orange" id="strokeOrangeMenu"></span>
								</li>
								<li>
									<span color="green" id="strokeGreenMenu"></span>
								</li>
							</ul>	
						</div>
					</li>
					<li>
						<div class="menu" id="strokeWithMenu">
							<span class="icon-base stroke-width-small-icon"></span>
						</div>
						<div class="menu-items">
							<ul>
								<li>
									<span>
										<span width="9" class="icon-base stroke-width-morelarge-icon"></span>
									</span>
								</li>
								<li>
									<span>
										<span width="6" class="icon-base stroke-width-large-icon"></span>
									</span>
								</li>
								<li>
									<span>
										<span width="3" class="icon-base stroke-width-normal-icon"></span>
									</span>
								</li>
								<li>
									<span>
										<span width="1" class="icon-base stroke-width-small-icon"></span>
									</span>
								</li>
							</ul>	
						</div>
					</li>
					<li>
						<div class="menu" id="fontsizeMenu">
							<span>12px</span>
						</div>
						<div class="menu-items">
							<ul>
								<li>
									<span>
										<span value="12">12px</span>
									</span>
								</li>
								<li>
									<span>
										<span value="16">16px</span>
									</span>
								</li>
								<li>
									<span>
										<span value="20">20px</span>
									</span>
								</li>
								<li>
									<span>
										<span value="24">24px</span>
									</span>
								</li>
							</ul>	
						</div>
					</li>
					<li>
						<div class="menu" id="sysFuncMenu">
							<span class="icon-base setting-icon"></span>
						</div>
						<div class="menu-items" id="sysFuncSubMenu">
							<ul>
								<li>
									<span>
										<span id="playbackTool" class="icon-base playback-icon"></span>
									</span>
								</li>
								<li>
									<span>
										<span id="fastPlaybackTool" class="icon-base fast-playback-icon"></span>
									</span>
								</li>
								<li>
									<span>
										<span id="undoTool" class="icon-base undo-icon"></span>
									</span>
								</li>
								<li>
									<span>
										<span id="eraserTool" class="icon-base eraser-icon"></span>
									</span>
								</li>
								<li>
									<span>
										<span id="toImageTool" class="icon-base save-as-image-icon"></span>
									</span>
								</li>
							</ul>	
						</div>
					</li>
					<li style="display: none"><input type="button" value="Polygon" id="drawPolygonTool" /></li>
				</ul>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery/jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="js/jquery/jquery-ui-1.8.23.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery-plugin/jquery.extension.js"></script>
		<script type="text/javascript" src="js/jquery-plugin/jquery.filedrop.js"></script>
		<script type="text/javascript" src="js/3th/kinetic-v4.0.5.js"></script>
		<script type="text/javascript" src="js/3th/kinetic-v4.0.5-extention.js"></script>
		<script type="text/javascript" src="js/3th/canvas-to-blob.js"></script>
		<script type="text/javascript" src="js/dwb.js"></script>
		<script type="text/javascript" src="js/dwb_stage.js"></script>
	</body>
</html>
